<template>
  <div v-show="detailedPageVisible" class="app-container">
    <!-- PageHeader 页头 -->
    <el-page-header @back="goBack" :content="`产品：${productData.productName || ''}`"/>

    <!-- 设备数量 -->
    <div class="space-between obvious-container">

      <el-row>
        <el-col :span="4">
          <span>设备数量：</span>
          <span class="device-quantity">{{ deviceQuantity }}</span>&nbsp;&nbsp;
          <el-button type="text" @click="viewDeviceList">查看</el-button>
        </el-col>
        <el-col :span="20">
          <dict-tag style="float: left" :options="dict.type.iot_publish_state" :value="productData.publishState"/>

          <!-- 状态控制 -->
          <span style="padding-left: 10px">

           <el-popconfirm
             title="确认发布？"
             @confirm="handleDeployProduct"
           >
             <el-button
               v-show="productData.publishState === 0"
               size="mini"
               type="text"
               v-hasPermi="['iot:product:edit']"
               slot="reference"
             >发布
             </el-button>
           </el-popconfirm>
           <el-popconfirm
             title="确认取消？"
             @confirm="handleUndeployProduct"
           >
              <el-button
                v-show="productData.publishState === 1"
                size="mini"
                type="text"
                v-hasPermi="['iot:product:edit']"
                slot="reference"
              >取消
            </el-button>
           </el-popconfirm>
          </span>
        </el-col>
      </el-row>
    </div>

    <!-- 产品信息、 物模型、 告警设置 -->
    <div class="space-between">
      <el-tabs type="border-card" v-model="tabsActiveName">
        <!-- 产品信息标签 -->
        <el-tab-pane label="产品信息" name="productDetails">

          <!-- 产品信息列表 -->
          <product-descriptions/>

        </el-tab-pane>

        <!-- 物模型标签 -->
        <el-tab-pane label="物模型" name="metadata">
          <physical-model v-if="tabsActiveName === 'metadata'"/>
        </el-tab-pane>

        <!-- todo 暂时注释掉 -->
<!--        <el-tab-pane label="告警设置" name="alarmSet">
          告警设置
        </el-tab-pane>-->

      </el-tabs>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import ProductDescriptions from '@/views/iot/product/productDescriptions'
import PhysicalModel from '@/views/iot/product/physical-model'
import { deployProduct, undeployProduct } from '@/api/iot/product'
import { getDeviceCount } from '@/api/iot/device'

export default {
  name: 'ProductDetailed',
  // 字典
  dicts: [
    // 发布状态
    'iot_publish_state'
  ],
  components: {
    // 产品详情组件
    ProductDescriptions,
    // 物模型
    PhysicalModel
  },
  data() {
    return {
      // 设备数量
      deviceQuantity: undefined,
      // 当前活动的页签（活动页产品信息）
      tabsActiveName: 'productDetails'
    }
  },
  computed: {
    ...mapState({
      productData: state => state.product.productData,
      detailedPageVisible: state => state.product.detailedPageVisible
    })
  },
  watch: {
    detailedPageVisible(state) {
      if (state) {
        //  还原页签默认值
        this.tabsActiveName = 'productDetails'
      }
    },
    /** 监听产品id变化 */
    productData(product) {
      const productId = product.id
      if (productId) {
        // 获取设备数量
        getDeviceCount({ productId })
          .then(({ data }) => {
            this.deviceQuantity = data
          })
      }
    }
  },

  methods: {
    /**
     *  返回主页
     *  隐藏详情页
     */
    goBack() {
      this.$store.commit('PRODUCT_DETAILED_PAGE_VISIBLE', false)
    },

    /** 查看产品下设备列表 */
    viewDeviceList() {
      this.$router.push({
        path: '/iot/device',
        query: {
          productId: this.productData.id
        }
      })
    },

    /** 点击发布按钮操作 */
    handleDeployProduct() {
      deployProduct(this.productData.id).then(() => {
        this.$store.commit('PRODUCT_DATA', { publishState: 1 })
      })
    },

    /** 点击发布按钮操作 */
    handleUndeployProduct() {
      undeployProduct(this.productData.id).then(() => {
        this.$store.commit('PRODUCT_DATA', { publishState: 0 })
      })
    },

  }
}
</script>

<style lang="scss" scoped>

// 块与块上下间距
.space-between {
  margin-top: 20px
}

// 上面设备数量、发布状态容器
.obvious-container {
  // 字体大小
  font-size: 14px;

  // 设备数量数字
  .device-quantity {
    // 数字颜色
    color: rgba(0, 0, 0, 0.65)
  }
}

</style>
